<template>
  <div class="bread">
    <div class="bread-content">
      <span @click="toHomePage" class="home">Home / </span>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBread',
  methods: {
    toHomePage () {
      this.$router.push('/')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .bread
    max-width 100%
    height 45px
    background #f0f0f0
    .bread-content
      width 83%
      height 45px
      line-height 45px
      margin 0 auto
      font-size 14px
      .home
        cursor pointer
      .home:hover
        color #409eff
</style>
